<template>
	<!-- <view>
		支付页面
	</view> -->
	<view class="box">
		<view class="block">
			<view class="t">订单编号:{{PreOrderById.orderSn}}</view>
			<view class="t">订单金额:{{PreOrderById.totalAmount}}元</view>
		</view>
		<view class="block">
			<view class="block-t">选择支付方式</view>
			<view class="block-c" @tap="paytype='alipay'">
				<image src="../../../../../static/icons/alipay.png" mode=""></image>
				<view class="pays">支付宝支付</view>		
				<view class="right">
					<radio :checked="paytype=='alipay'" color="#354E44" />
				</view>
			</view>
			<view class="block-c"  @tap="paytype='wxpay'">
				<image src="../../../../../static/icons/wxpay.png" mode=""></image>
				<view class="pays">微信支付支付</view>
				<view class="right">
					<radio :checked="paytype=='wxpay'" color="#354E44" />
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="btn" @tap="Confirm">立即支付</view>
			<view class="btn-b">点击立即支付,即代表您同意《条款协议》</view>
		</view>
	</view>
</template>

<script>
	import { payConfirm,getPreOrderById} from '../../../../../api/mine/car/index.js'
	import mix from "@/mixins/index.js"
	export default {
		mixins:[mix],
		data() {
			return {
				//传过来的id
				id:"",
				paytype:"alipay",
				PreOrderById:[],
			};
		},
		onLoad(e){		
			this.id=e.id;
			console.log(this.id)
			// this.init()
		},
		onShow(){
			this.checkLogins(this.init)
		},
		methods:{
			init(){
				getPreOrderById(this.id).then(res=>{
				console.log(res);
				this.PreOrderById=res.data.orderBase;
			})
			},
			payment(){
				payConfirm({
					orderId:this.id,
					payType:this.paytype == 'alipay' ? 1 : 2
				}).then(res=>{
					console.log(res)
					if(res.message){
						uni.showToast({
							title:'支付成功'
						});
						uni.navigateTo({
							url:"/pages/home/goods/payment/payments/payResult/payResult?price="+this.PreOrderById.totalAmount
						})
					}
				})
			},
			Confirm(){
				//如果登录就上传
				this.checkLogins(this.payment)
			}
		},
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	height: 100vh;
	background-color:#F1ECE7;
	padding-bottom: 15px;
	.block{
		width: 94%;
		padding: 0 3% 20px 3%;
		.t{
			width: 100%;
			height: 45px;
			display: flex;
			align-items: center;
		}
		.block-t{
			width: 100%;
			font-size: 17px;
		}
		.block-c{
			width: 100%;
			height: 60px;
			display: flex;
			align-items: center;
			image{
				width: 40px;
				height: 40px;
			}
			.pays{
				    width: 100%;
				    font-size: 15px;
			}
			.right{
				width: 50px;
				    display: flex;
				    justify-content: flex-end;
			}
		}
	}
	.pay{
		margin-top: 10px;
		    width: 100%;
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		.btn{
			width: 70%;
			    height: 40px;
			    border-radius: 40px;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    color: #fff;
			    background-color: #354e44;
			    box-shadow: 0px 2px 5px rgba(0,0,0,.2);
		}
		.btn-b{
			margin-top: 5px;
			    width: 100%;
			    font-size: 12px;
			    display: flex;
			    justify-content: center;
			    align-items: baseline;
			    color: #999
		}
	}
}
</style>
